<template>
	<a-modal v-model:visible="visible" width="90%" v-bind="$attrs">
		<template #footer>
			<a-button :disabled="current === 0 || current === 2" style="margin-left: 8px" @click="prev"> 上一步 </a-button>
			<a-button :disabled="current === 2" type="primary" style="margin-left: 8px" @click="next"> 继续</a-button>
			<a-button type="primary" danger ghost style="margin-left: 8px" @click="closeImport"> 关闭</a-button>
		</template>
		<a-card class="steps-card" :bordered="false">
			<a-row class="xn-row">
				<a-col :span="6"></a-col>
				<a-col :span="12">
					<a-steps :current="current">
						<a-step v-for="item in steps" :key="item.title" :title="item.title" />
					</a-steps>
				</a-col>
			</a-row>
		</a-card>
		<a-divider />
		<div v-if="current === 0">
			<preview ref="basicRef" :api="props.api" />
		</div>
		<div v-show="current === 1">
			<submit ref="submitRef" :api="props.api" :max-upload-count="props.maxUploadCount" @updateResult="updateResult">
				<template #icon>
					<slot name="icon"></slot>
				</template>
			</submit>
		</div>
		<div v-if="current === 2">
			<a-card>
				<!-- <a-result :status="resultStatus" :title="resultTtitle"> -->
				<a-result :status="resultStatus" :title="resultTtitle">
					<template #icon v-if="defaultPercent < 100">
						<a-progress type="circle" :width="80" :percent="defaultPercent" />
					</template>
					<template #subTitle>
						<!-- <a-progress style="margin: auto" type="circle" :percent="defaultPercent" /> -->
						<!-- :sub-title="statistics" -->
						<!-- `总共导入${importResult.total}条数据,其中导入成功${importResult.importCount}条,导入失败${importResult.failCount}条` -->
						<p style="color: grey; margin-top: 10px">
							总需导入
							<span>{{ importResult.total }}</span
							>条数据,其中导入成功<span style="color: green">{{ importResult.importCount }}</span
							>条,导入失败<span style="color: red">{{ importResult.failCount }}</span
							>条
							<!-- {{ statistics }} -->
						</p>
					</template>
					<template #extra>
						<a-button v-if="!importResult.success" danger @click="prev">查看错误</a-button>
						<a-button v-if="defaultPercent === 100" type="primary" @click="closeImport">返回列表</a-button>
					</template>
				</a-result>
			</a-card>
		</div>
	</a-modal>
</template>
<script setup name="DataImport">
	import preview from './basic.vue'
	import submit from './submit.vue'
	import { message, Modal } from 'ant-design-vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { createVNode, defineComponent } from 'vue'

	const visible = ref(false)
	const emit = defineEmits({ successful: null })
	const current = ref(0) //当前项
	const basicRef = ref() //预览界面
	const submitRef = ref() //导入提交界面
	const defaultPercent = ref(0) //进度条进度
	const props = defineProps({
		//接口
		api: { type: Object },
		//单次最大导入数量
		maxUploadCount: { type: Number, default: 1000 }
	})

	//导入结果
	let importResult = reactive({
		success: true,
		total: 0,
		importCount: 0,
		failCount: 0,
		data: []
	})
	//更新结果
	const updateResult = (data) => {
		importResult.importCount += data.importCount
		importResult.failCount += data.failCount
		importResult.data = importResult.data.concat(data.data) //合并数组
		let alreadyCount = importResult.importCount + importResult.failCount //已级处理的数量
		defaultPercent.value = parseFloat(alreadyCount / importResult.total).toFixed(2) * 100 //计算百分比
		//如果导入的数量加导入失败的数量等于总数表示导入完成
		if (alreadyCount == importResult.total) {
			defaultPercent.value = 100
			if (importResult.failCount > 0) {
				//如果有错误结果就失败
				importResult.success = false
			}
		}
	}
	//导入结果状态
	const resultStatus = computed(() => {
		return importResult.success ? 'success' : 'error'
	})

	//导入结果原因
	const resultTtitle = computed(() => {
		var message = '导入中'
		//
		if (defaultPercent.value == 100) {
			message = importResult.success ? '导入成功' : '导入失败'
		}
		return message
	})

	//统计数据
	const statistics = computed(() => {
		let message = `总共导入${importResult.total}条数据,其中导入成功${importResult.importCount}条,导入失败${importResult.failCount}条`
		return message
	})
	// 下一步
	const next = () => {
		//第一步
		if (current.value === 0) {
			//上传文件
			basicRef.value
				.onSubmit()
				.then((data) => {
					current.value++
					nextTick(() => {
						submitRef.value.onOpen(data)
					})
				})
				.catch(() => {})
			// current.value++
			// nextTick(() => {
			// 	submitRef.value.onOpen(1)
			// })
		}
		//第二步
		if (current.value === 1) {
			Modal.confirm({
				title: '确定导入以下数据?',
				icon: createVNode(ExclamationCircleOutlined),
				content: ``,
				onOk() {
					defaultPercent.value = 0 //归0
					//如果需要分批导入
					if (submitRef.value.needBatch()) {
						importResult.total = submitRef.value.getImportCount() //获取数量
						current.value++
						submitRef.value.onSubmitBatch() //批量导入
					} else {
						//全量导入
						submitRef.value
							.onSubmit()
							.then((data) => {
								current.value++
								//如果导入成功
								importResult.total = data.total
								importResult.importCount = data.importCount
								importResult.failCount = data.failCount
								importResult.success = data.success
								importResult.data = data.data
								defaultPercent.value = 100
							})
							.catch((err) => {
								message.warning(err.msg)
							})
					}
				},
				onCancel() {}
			})
		}
	}
	// 上一步
	const prev = () => {
		if (current.value === 2) {
			if (importResult.data && importResult.data.length > 0) {
				current.value--
				nextTick(() => {
					submitRef.value.onFail(importResult.data)
				})
			} else {
				emit('successful')
			}
		} else {
			current.value--
		}
	}
	// 分布步骤数据
	const steps = [
		{
			title: '上传导入文件',
			content: '上传导入文件'
		},
		{
			title: '确认导入文件',
			content: '确认导入文件'
		},
		{
			title: '导入结果',
			content: '导入结果'
		}
	]
	// 打开这个界面
	const importSteps = () => {
		visible.value = true
	}

	// 关闭这个界面
	const closeImport = () => {
		visible.value = false
		current.value = 0
		emit('successful')
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		importSteps
	})
</script>

<style scoped>
	.steps-card {
		margin-top: -12px;
		margin-left: -12px;
		margin-right: -12px;
		margin-bottom: 10px;
		padding-top: -10px;
	}

	.xn-row {
		margin-bottom: -10px;
		margin-top: -10px;
	}
</style>
